<template>
    <div>
        <p>VUEX:状态管理器，用于管理vue项目中的一些重要变量</p>
        <p>这些变量会反复出现在项目中的许多地方，所以我们需要统一管理</p>
        <p>VUEX就是项目中的一个全局变量，可以在项目中的任何地方获取、修改</p>
        <p>
            <mark>更改Vuex的store中的状态(变量)的唯一方法是commit一个mutation</mark>
        </p>
        <p>dispatch ->action</p>
        <p>commit ->mutation</p>
        <br>
        <hr>
        <p><mark>{{$store.state.count}}</mark>
        <button @click="add">+1</button>
        <button @click="addAsync">Async</button>
        </p>
        <p>getters:{{$store.getters.newCount}}</p>
    </div>
</template>

<script>
export default {
    data(){
        return{
        }
    },
    created() {
        console.log('vuex:',this.$store.state.count)
    },
    methods: {
        add() {
            this.$store.commit('change1',{
                num1: 111,
                num2: 555
            })
        },
        addAsync() {
           setTimeout(() => {
               this.$store.dispatch('increment')
           }, 3000)
        }
    },
}
</script>

<style scoped>

</style>